import { ThemeContext } from "../../core";

import SwitchThemeButton from "./SwitchThemeButton";
import { FC, ReactElement, useContext } from "react";

export interface RenderSwitchThemeProps {
  onClick: () => void;
}

type RenderSwitchTheme = (props: RenderSwitchThemeProps) => ReactElement;

export interface SwitchThemeProps {
  children?: RenderSwitchTheme;
}

const SwitchTheme: FC<{
  children?: RenderSwitchTheme;
}> = ({ children }) => {
  const theme = useContext(ThemeContext);
  const defaultChildren = (props: RenderSwitchThemeProps) => (
    <SwitchThemeButton onClick={props.onClick} />
  );
  const render = children || defaultChildren;

  return render({
    onClick: () =>
      theme.setCurrentTheme(theme.currentTheme === "dark" ? "light" : "dark"),
  });
};

export default SwitchTheme;
